<template>
	<view class="image-swiper">
		<swiper class="swiper" circular autoplay :current="current" @change="handleSwiperChange">
			<swiper-item class="swiper-item" v-for="(item, index) in detail_urls" :key="index">
				<image class="img" :src="item" mode="aspectFill" />
			</swiper-item>
		</swiper>
		<view class="dot" :class="{ 'dot-left': dot_position === 'left', 'dot-right': dot_position === 'right' }">
			<view class="dot-inner">相册 {{ current + 1 }}/{{ detail_urls?.length }}</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from "vue"

interface ImageSwiperProps {
	detail_urls: string[]
	dot_position: "left" | "right"
}

interface SwiperEvent {
	detail: {
		current: number
	}
}

withDefaults(defineProps<ImageSwiperProps>(), { dot_position: "left" })

const current = ref(0)

const handleSwiperChange = ({ detail }: SwiperEvent) => (current.value = detail.current)
</script>

<style lang="scss" scoped>
.image-swiper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 668rpx;

	.swiper {
		height: 100%;

		&-item {
			width: 100%;
		}

		.img {
			width: 100%;
			height: 100%;
		}
	}

	.dot {
		position: absolute;
		bottom: 54rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 106rpx;
		height: 40rpx;
		border-radius: 20rpx;
		background: rgba(0, 0, 0, 0.3);

		&-inner {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 102rpx;
			height: 36rpx;
			line-height: 28rpx;
			border-radius: 18rpx;
			background: rgba(255, 255, 255, 0.85);
			font-weight: 500;
			font-size: 20rpx;
			color: rgba(0, 0, 0, 0.9);
		}
	}

	.dot-left {
		left: 26rpx;
	}

	.dot-right {
		right: 26rpx;
	}
}
</style>
